<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>

</head>
<body>


    <!-- 当需要将一个数组遍历或枚举一个对象循环显示时, 就会用到列表渲染指令 v-for
        它的表达式需结合 in 来使用, 类似 item in items 的形式
     -->
    <div id="app1">

        <ul>

            <!-- books 是数据, book 是当前数组元素的别名, 循环出每个 <li> 内的元素都可以访问到对应的当前数据 book -->
            <li v-for="book in books">{{ book.name }}</li>

        </ul>


        <ul>

            <!-- v-for 表达式支持一个可选参数作为当前项的索引, 分隔符 in 前的语句使用括号,第二项就是 books 当前项的索引 -->
            <li v-for="(book, index) in books">{{ index }} - {{ book.name }}</li>
        </ul>


        <ul>
            <template v-for="book in books">
                <li>书名: {{ book.name }}</li>
                <li>作者: {{ book.author }}</li>
            </template>

        </ul>



        <!-- 除了数组外, 对象的属性也可以遍历 -->
        <span v-for="value in user">{{ value }}</span>
        <!-- 渲染结果
            <span>Aresn</span>
            <span>男</span>
            <span>26</span>
        -->



        <!-- 遍历对象属性的时候,有两个可选参数,分别是键名和索引-->
        <ul>
            <li v-for="(value, key, index) in user">
                {{ index }} - {{ key }} : {{ value }}
            </li>
        </ul>
        <!-- 渲染结果
            <ul>
                <li>0 - name : Aresn</li>
                <li>1 - gender : 男</li>
                <li>2 - age : 26</li>
            </ul>
        -->




        <!-- v-for 还可以迭代整数-->
        <div>
            <span v-for="n in 10">{{ n }}</span>
        </div>
        <!-- 渲染结果
            <div>
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
                <span>6</span>
                <span>7</span>
                <span>8</span>
                <span>9</span>
                <span>10</span>
            </div>
        -->


    </div>


    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app1 = new Vue({
            el: "#app1",
            data: {

                // 定义一个数组类型的数据 books, 用 v-for 将 <li> 标签循环渲染
                books: [
                    {
                        'name': "<< Vue.js 实战 >>",
                        'author': '梁灏'
                    },
                    {
                        'name': "<< JavaScript 语言精粹 >>",
                        'author': 'Douglas Crockford'

                    },
                    {
                        'name': "<< JavaScript 高级程序设计 >>",
                        'author': 'Nicholas C.Zakas'
                    }
                ],

                user: {
                    name: 'Aresn',
                    gender: '男',
                    age: 26
                }
            }
        });

    </script>

</body>
</html>